<template>
  <div class="h-[100%] p-2 overflow-auto hide-scrollbar">
    <!--  轮播图  -->
    <div class="h-[25vh]">
      <el-carousel-card :autoplay="false" :data="carouselItems">
        <template #item="{ item }">
          <img
            :src="item?.imageUrl"
            alt="图片"
            class="w-full h-full rounded-2xl"
            @click="handleBanner(item)"
          />
        </template>
      </el-carousel-card>
    </div>
    <!--  热门数据  -->
    <div class="mt-8">
      <song-tab
        :more="true"
        :sub-list="playListHot"
        label="热门歌单"
        @handle-more="handleMore"
        @change-sub-item="handleChangeSubItem"
      ></song-tab>

      <loading-wrapper :is-empty="isEmpty" :is-loading="isLoading">
        <div class="flex flex-wrap box-border">
          <play-list-item
            v-for="(item, index) in hotData"
            :key="index"
            :item="item"
            cover-img-type="coverImgUrl"
          ></play-list-item>
        </div>
      </loading-wrapper>
    </div>

    <!--  最新音乐  -->
    <song-tab label="最新音乐" show-left-row @on-click-title="onClickMoreNewSong"></song-tab>
    <div class="flex flex-wrap">
      <small-song-item
        v-for="item in newPlayList"
        :key="item.id"
        :item="item"
        @on-click-more="onClickMore"
        @play-song="playSong"
      ></small-song-item>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useLoading } from '../../base-ui/loading-wrapper'
import ElCarouselCard from '../../base-ui/carousel/index.vue'
import playListItem from './components/play-list-item.vue'
import songTab from '../../base-ui/song-tab/index.vue'
import smallSongItem from '../../components/small-song-item/index.vue'
import request from '../../server/request'
import loadingWrapper from '../../base-ui/loading-wrapper/index.vue'
import useAudio from '../../store/modules/audio-data'

const audioStore = useAudio()

const carouselItems = ref([])
const { isLoading, isEmpty, withLoading } = useLoading()

onMounted(() => {
  getBannerList()
  getHotList()
  getPlayListHot()
  getNewPlayList()
})

// 轮播图数据
const getBannerList = () => {
  request.get('/banner').then((res) => {
    carouselItems.value = res.banners
  })
}
const handleBanner = (item) => {
  console.log(item)
}
// 热门数据
const hotData = ref([])
const playListHot = ref([])
const getHotList = async (type = '全部') => {
  const req = () => request.get('/top/playlist?cat=' + type, { limit: 20 })
  const res = await withLoading(req)
  hotData.value = res.playlists
}

const getPlayListHot = async () => {
  request.get('/playlist/hot').then((res) => {
    playListHot.value = res.tags
    playListHot.value.unshift({
      name: '全部'
    })
  })
}
const handleChangeSubItem = (tag) => {
  getHotList(tag.name)
}
const handleMore = () => {
  console.log(2)
}

// 最新音乐
const newPlayList = ref([])
const getNewPlayList = async () => {
  const res = await request.get('/personalized/newsong')
  newPlayList.value = res.result
}
const onClickMoreNewSong = () => {
  console.log('点击最新音乐')
}
const onClickMore = (e) => {
  console.log(e, 'more')
}
const playSong = (e) => {
  audioStore.setCurrentPlay(e)
  audioStore.setPlayList(e)
}
</script>

<style lang="scss" scoped></style>
